<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <title>摇一摇</title>
</head>
<body style="text-align: center">
<#--您的手机号码是 : ${phone!}
HTML 5 手机摇一摇，在手机上运行的。-->
<img src="${ctx}/static/mobileweb/shake/shake.png" style="margin-top: 10px;">
<div>
   摇一摇，摇出电影票
</div>
</body>
<script type="text/javascript" src="${ctx}/static/mobileweb/scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    var color = new Array('#fff', '#ff0', '#f00', '#000', '#00f', '#0ff');
    if (window.DeviceMotionEvent) {
        var speed = 25;
        var x = y = z = lastX = lastY = lastZ = 0;
        window.addEventListener('devicemotion', function () {
            var acceleration = event.accelerationIncludingGravity;
            x = acceleration.x;
            y = acceleration.y;
            if (Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed) {
                //document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];
                $.ajax({
                    type : "POST",
                    url: "${ctx}/mobileweb/shake/shake",
                    data: "phone=${phone!}",
                    success: function(msg){

                    }
                });
            }
            lastX = x;
            lastY = y;
        }, false);
    }
</script>

</html>
